<!--
 *@Date: 2022-12-07 15:44:09
 * @LastEditTime: 2023-02-08 18:21:14
 *
 * @Description:
-->
<template>
    <base-container>
        <view v-if="data.length > 0" style="display:flex;height:100%;">
            <scroll-view :scroll-top="leftScrollTop" scroll-y="true" class="left-scroll"
                :style="{ height: windowHeight + 'px' }">
                <view :class="currentItemId === item.id ? 'currentItem' : ''" @tap="cdTap(item)"
                    v-for="(item, index) in data" :key="index" class="scroll-item">{{ item.name }}
                </view>
            </scroll-view>
            <scroll-view :scroll-top="rightScrollTop" scroll-y="true" class="right-scroll"
                :style="{ height: windowHeight + 'px' }">
                <view style="display:flex;flex-wrap: wrap;padding:10rpx">
                    <view v-for="(item, index) in dataItem" :key="index">
                        <view style="width:510rpx;" v-if="item.children && item.children.length > 0">
                            <view style="color:#808080;font-size:28rpx">{{ item.name }}</view>
                            <view style="display:flex;flex-wrap: wrap;">
                                <view v-for="(item1, index1) in item.children" :key="index1" class="scroll-item"
                                    @tap="dataItemTap(item1)">
                                    <image class="avatar"
                                        :src="item1.tptb ? (api.HOST + '?sjdx.dxdm=SYS_QX_QTQX&sys.cllx=download&yobj.id=' + item1.tptb) : '/static/logo.png'">
                                    </image>
                                    <view>{{ item1.name }}</view>
                                </view>
                            </view>
                        </view>
                        <view v-else class="scroll-item" @tap="dataItemTap(item)">
                            <image class="avatar"
                                :src="item.tptb ? (api.HOST + '?sjdx.dxdm=SYS_QX_QTQX&sys.cllx=download&yobj.id=' + item.tptb) : '/static/logo.png'">
                            </image>
                            <view>{{ item.name }}</view>
                        </view>

                        <!-- <view>{{ JSON.stringify(item) }}}</view> -->
                    </view>
                </view>
            </scroll-view>
        </view>
        <view v-else style="display:flex;height:400px;align-items: center;justify-content: center;">

            <view style="text-align:center;color:#999">
                暂无数据
            </view>
        </view>
    </base-container>
</template>

<script setup lang="ts">
import api from '@/utils/net/api';
import { useUserStore } from '@/stores/modules/user';
import { onLoad, onReady, onShow } from '@dcloudio/uni-app';
import { ref, watch } from 'vue';
import HomeModelImp from '../model/HomeModelImp';
const leftScrollTop = ref(0)
const rightScrollTop = ref(0)
const windowHeight = ref(0)
const data = ref([] as any)
const dataItem = ref([] as any)
const homeModelImp = new HomeModelImp()
const currentItemId = ref("")
const cdTap = (item: any) => {
    dataItem.value = item.children
    currentItemId.value = item.id
}
const dataItemTap = (item: any) => {
    uni.navigateTo({ url: `/pages/sjdx/view/index?dm=${item.dxdm}&title=${item.name}&authCode=${item.dm}` })
}
const initSys = () => {
    homeModelImp.getCds().then((result) => {
        console.log(result)
        data.value = result
        dataItem.value = result[0].children
        currentItemId.value = result[0].id
    }).catch(() => { })
}
watch(() => useUserStore().getCurrentSystemCode, (newValue) => {
    if (newValue) {
        initSys()
    }
})
onReady(() => {
    windowHeight.value = uni.getSystemInfoSync().windowHeight
})

onShow(() => {
    if (useUserStore().getCurrentSystemName) {
        uni.setNavigationBarTitle({
            title: useUserStore().getCurrentSystemName
        });
    }
})

onLoad(() => {
    initSys()
})

</script>

<style lang="scss" scoped>
.currentItem {
    background-color: $uni-color-primary !important;
    color: $uni-text-color-inverse;
}

.left-scroll {
    width: 200rpx;
    border-top: 1px solid $uni-border-color;


    .scroll-item {
        font-size: 32rpx;
        text-align: center;
        background: #fff;
        padding: 20rpx;
        border-right: 1px solid $uni-border-color;
        border-bottom: 1px solid $uni-border-color;
    }
}

.right-scroll {
    flex: 1;
    background: #fff;

    .scroll-item {
        width: 140rpx;
        padding: 10rpx;
        text-align: center;
        font-size: 28rpx;

        .avatar {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
        }
    }

}
</style>
